<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery.js"></script>
  <script src="js/vue-router.js"></script>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
  <div id="app">
    <el-card>
      <el-button type="primary" @click="toAdd">添加用户</el-button>
      <el-table :data="tableData" stripe style="width: 100%;margin-top: 10px;">
        <el-table-column prop="id" label="id">
        </el-table-column>
        <el-table-column prop="username" label="姓名">
        </el-table-column>
        <el-table-column prop="sex" label="性别">
        </el-table-column>
        <el-table-column prop="userType" label="用户类型">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="updateUser(scope.row.id)">更新</el-button>
            <el-button type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>



    <el-dialog title="修改用户" :visible.sync="updateModalVisible" width="50%" append-to-body>
      <el-form label-position="left" label-width="80px" :model="updateManager">
        <el-form-item label="id">
          <el-input v-model="updateManager.id"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="updateManager.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="updateManager.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-radio-group v-model="updateManager.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-radio-group v-model="updateManager.userType">
            <el-radio label="超级管理员"></el-radio>
            <el-radio label="二级管理员"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateModalVisible = false">取 消</el-button>
        <el-button type="primary" @click="doUpdate">确 定</el-button>
      </span>
    </el-dialog>


    <el-dialog title="新增用户" :visible.sync="addModalVisible" width="50%" append-to-body @close="handleAddClose">
      <el-form label-position="left" label-width="80px" :model="updateManager">
        <el-form-item label="用户名">
          <el-input v-model="addManager.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="addManager.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-radio-group v-model="addManager.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-radio-group v-model="addManager.userType">
            <el-radio label="超级管理员"></el-radio>
            <el-radio label="二级管理员"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addModalVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAdd">确 定</el-button>
      </span>
    </el-dialog>

  </div>

  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data() {
        return {
          tableData: [],
          updateManager: {
            "id": "",
            "username": "",
            "password": "",
            "sex": "",
            "userType": ""
          },
          addManager: {
            "username": "",
            "password": "",
            "sex": "",
            "userType": ""
          },
          updateModalVisible: false,
          addModalVisible: false,
        }
      },
      mounted() {
        this.getManagerList()
      },
      methods: {
        getManagerList() {
          $.ajax({
            type: 'get',
            url: 'http://localhost:8080/manage/selectAll',
            dataType: 'json',
            success: function (data) {
              if (data.code === 200) {
                vm.tableData = data.data.managers
              }
            }
          })
        },

        toAdd() {
            vm.addModalVisible = true
        },

        doAdd() {
            $.ajax({
              type: 'post',
              contentType: 'application/json',
              url: 'http://localhost:8080/manage/addManager',
              dataType: 'json',
              data: JSON.stringify(vm.addManager),
              success: function(msg) {
                if(msg.code === 200) {
                  vm.getManagerList();
                  vm.addModalVisible = false;
                }
              }
            })
        },

        handleAddClose() {
          vm.addManager.username = '';
          vm.addManager.password = '';
          vm.addManager.sex = '';
          vm.addManager.userType = '';
        },

        updateUser(id) {
          vm.updateModalVisible = true
          $.ajax({
            type: 'get',
            url: 'http://localhost:8080/manage/selectOneById/' + id,
            dataType: 'json',
            success: function (data) {
              if (data.code === 200) {
                vm.updateManager = data.data.manager
              }

            }
          })
        },

        doUpdate() {
          $.ajax({
            type: 'post',
            contentType: 'application/json',
            url: 'http://localhost:8080/manage/updateManager',
            dataType: 'json',
            data: JSON.stringify(vm.updateManager),
            success: function (data) {
              if (data.code === 200) {
                vm.getManagerList();
                vm.updateModalVisible = false;
              }
            }
          })
        },

        deleteUser(id) {
          this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            $.ajax({
              type: 'put',
              url: 'http://localhost:8080/manage/deleteManager/' + id,
              dataType: 'json',
              success: function (msg) {
                if (msg.code === 200) {
                  vm.getManagerList();
                }
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });

        }
      }
    })
  </script>
</body>

</html>